<template>
  <div
    class="background"
    style="background-color: #f1f4f6"
    v-loading="loading"
    :element-loading-text="text"
  >
    <HeaderTemplate :loading="loading" v-on:loadingChan="loadChan($event)" />
    <div class="card-header" v-show="isshow">
      <el-steps :active="active" finish-status="success" align-center>
        <el-step title="填写资料"></el-step>
        <el-step title="审核"></el-step>
        <el-step title="完善资料"></el-step>
        <!-- <el-step title="完成入驻"></el-step> -->
      </el-steps>
    </div>

    <!-- 填写资料 -->
    <ApplyCard
      :active="active"
      v-show="isshow"
      :style="active == 0 ? 'display:block' : 'display:none'"
      v-on:activeChange="activeChan($event)"
    ></ApplyCard>
    <!-- 审核 -->
    <Audit
      :active="active"
      v-on:activeChange="activeChan($event)"
      :style="active == 1 ? 'display:block' : 'display:none'"
    />

    <!-- 完善资料 -->
    <Information
      :style="active == 2 ? 'display:block' : 'display:none'"
      :active="active"
      v-on:activeChange="activeChan($event)"
    />

    <!-- 成功页 -->
    <div v-show="isUserEnter" class="pop_background"></div>
    <div class="pop_box" v-show="isUserEnter">
      <p>入驻成功</p>
      <span @click="navigator">进入旅行社管理后台</span>
    </div>

    <span
      class="applyBtn"
      :style="{ display: isshow ? 'none' : 'block' }"
      @click="isshow = !isshow"
      >立即申请入驻</span
    >
  </div>
</template>

<script>
import "@/global-style/style.less";
import HeaderTemplate from "@/components/HeaderTemplate.vue";
import ApplyCard from "@/views/UserEnter/ApplyCard.vue";
import Information from "@/views/UserEnter/Information.vue";
import Audit from "@/views/UserEnter/Audit.vue";

export default {
  components: { HeaderTemplate, ApplyCard, Information, Audit },
  data() {
    return {
      loading: false,
      text: "正在退出",
      isUserEnter: false,
      active: 0,
      userenter: false, // 入驻申请
      isshow: false,
    };
  },
  methods: {
    // 退出 登录
    activeChan(msg) {
      console.log(this.active);
      if (msg == 3) {
        this.isUserEnter = true;
      }
      this.active = msg;
    },
    navigator() {
      this.loading = true;
      this.text = "正在进入旅行社管理后台";
      setTimeout(() => {
        this.loading = false;
        this.$router.replace({ name: "CircuitIndex" });
      }, 300);
    },
    loadChan(e) {
      this.loading = e;
      setTimeout(() => {
        this.loading = false;
      }, 400);
    },
  },
};
</script>

<style lang='less' >
.pop_background {
  position: absolute;
  // display:;
  z-index: 6;
  height: 100vh;
  width: 100vw;
  background-color: rgba(0, 0, 0, 0.3);
}
.pop_box {
  font-size: 14px;
  position: absolute;
  z-index: 7;
  margin-top: 3.6vh;
  padding-top: 3vh;
  padding-bottom: 2vh;

  top: 32%;
  left: 50%;
  transform: translate(-50%, -28%);
  background: #ffffff;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  opacity: 1;
  border-radius: 15px;
  p {
    padding: 2vh;
    font-weight: 550;
  }
  & > span {
    cursor: pointer;
    padding: 0 60px;
    display: block;
    color: #07c160;
    padding-bottom: 2vh;
  }
}
.background {
  & > div.card-header {
    width: 50.4vw;
    background: #ffffff;
    box-shadow: 2px 0px 2px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    opacity: 1;
    position: absolute;
    top: 7vh;
    left: 50%;
    transform: translate(-50%);
    font-size: 14px;
    .el-steps {
      padding: 1vh 0;
      .el-step__title {
        line-height: 16px;
        font-size: 14px;
      }
      .el-step__icon {
        width: 20px;
        height: 20px;
      }
    }
  }
}
</style>
